body{
    background: url(../maohelaoshu.png);
   background-size: 100% 888px;
    }
    /* 添加熊喵：移动图片--必须使用背景图 */
    #bear{
    width:300px ;
    height: 300px;
    border: 1px solid red; 
    background: url(../mao2.png);
    background-size: 100% 100%;
    position: relative;
   left:10px ;
     top: 10px;
     /* 动画属性标准写法：打开bear关键帧8秒钟匀速无限次循环效果 */
     animation: bear .8s linear infinite;
    
    }
    /* 美化  字体大  字体家族：华文云彩 */
    h1{
    font-family: "华文彩云";
    }
    
    
    
    /* 关键帧属性 :用法：在css文件中最后定义，需要动画，添加对应样式块中*/
    /* 关键帧属性：特点：继承【样式块中试用关键帧--关键帧属性默认继承样式块属性】 */
    @keyframes bear{
     0%{
    /* 起始帧默认不动 */
    left: 100px;
     top: 100px;
     }
     10%{
     left: -100px;
    top: -200px;
     width: 250px;
   height: 250px;
   background: url(../mao2.png);
     background-size: 100% 100%;
     transform: rotate(360deg);
   opacity: 1;
   }
     20%{
     left: -100px;
     top: -200px;
    width: 250px;
     height: 250px;
     background: url(../mao3.png);
     background-size: 100% 100%;
     }
     30%{
     left: -100px;
     top: -200px;
     width: 250px;
   height: 250px;
     background: url(../bear_4.png);
     background-size: 100% 100%;
     }
     40%{
     left: -100px;
     top: -200px;
     width: 250px;
    height: 250px;
     background: url(../mao5.png);
    background-size: 100% 100%;
   }
}